<template>
	<view class="content">
		<uni-page-head uni-page-head-type="default">
			<div class="uni-page-head" style="background-color: rgb(248, 248, 248); color: rgb(0, 0, 0);">
				<div class="uni-page-head-hd" @click="returns()">
					<div class="uni-page-head-btn" ><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
				</div>
				<div class="uni-page-head-bd">
					<div class="uni-page-head__title" style="font-size: 16px; opacity: 1;">
						<!---->
						{{info.title}}
					</div>
				</div>
				<!---->
				<div class="uni-page-head-ft"></div>
			</div>
			<div class="uni-placeholder"></div>
		</uni-page-head>
		<view class="SelectType">
			<view class="dateType">
				<view class="Type">
					<view class="red"></view>
					<text>已选</text>
				</view>
				<view class="Type">
					<view class="wathet"></view>
					<text>未选</text>
				</view>
				<view class="Type">
					<view class="grey"></view>
					<text>不可选</text>
				</view>
			</view>
			<view class="Tips">
				注：展架租赁以一年为单位，一年可以免费更换四次
				商品超过另计
			</view>
			<view class="Select">
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
				<view>
					<view></view>
				</view>
			</view>
			<view class="confirm" @click='confirm()'>
				选定展位（B08）
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {
				title: ''
			}
		};
	},
	    onLoad: function (e) { //option为object类型，会序列化上个页面传递的参数
		   this.info.title=e.title
	    },
		methods:{
			returns(){
				uni.navigateBack({
					url:"../commodity/commodity"
				})
			},
			confirm(){
				uni.navigateTo({
					url:"../information/information"
				})
			}
		}
};
</script>

<style lang="scss">
.content{
	.SelectType{
		padding: 40upx 70upx;
		.dateType{
			display: flex;
			justify-content: space-between;
			.Type{
				display: flex;
				text{
					font-size: 24upx;
					    padding: 4upx 20upx;
				}
				.red{
					width: 40upx;
					height: 40upx;
					background: #E50012;
					border-radius: 6upx;
				}
				.wathet{
					width: 40upx;
					height: 40upx;
					background: #EFF1FF;
					border-radius: 6upx;
				}
				.grey{
					width: 40upx;
					height: 40upx;
					background: #B1B3BE;
					border-radius: 6upx;
				}
			}
		}
		.Tips{
			    font-size: 26upx;
			    padding: 40upx 0;
			    font-family: Microsoft YaHei UI;
			    font-weight: 400;
			    color: #999999;
		}
		.Select{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			uni-view{
				    width: 16%;
				    margin: 30upx 4upx;
				view{
					width: 80upx;
					height: 80upx;
					background: #EFF1FF;
					border-radius: 6upx;
					margin: auto;
				}
			}
		}
		.confirm{
			    background: #E50012;
			    border-radius: 48upx;
			    margin: auto;
			    width: 40%;
			    padding: 26upx 150upx;
			    color: #ffff;
			    font-size: 36upx;
				position: fixed;
				top: 85%;
				z-index: 9999;
		}
	}
}
</style>
